<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px" style="padding-top:20px">
                <el-form-item label="部门编码">
                    <el-input v-model="searchFilters.platformCode" placeholder="请输入部门Code："></el-input>
                </el-form-item>
                <el-form-item label="BD部门名称">
                    <el-input v-model="searchFilters.platformName" placeholder="请输入BD部门名称"></el-input>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="searchFilters.createTime" type="month" placeholder="选择月">
                    </el-date-picker>
                </el-form-item>

                <!-- 搜索区域按钮-查询,重置 -->
                <div class="tool-wrap">
                    <div class="left-area">
                        <el-button-group>
                            <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                            <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                        </el-button-group>
                    </div>
                </div>
                <!-- 表格数据部分 -->
                <div class="table-wrap">
                    <jic-table :height="350" :operationWidth=300 :tableList="tableList" :showUpdateIntegral=true :tableHeaderList="tableHeaderList" :totalSize="totalSize" :showDetailOperation=true :showEditOperation=false :showBatchDelete=false :showSelection=false :showIndex=false :showDeleteOperation=false @findPage="findPage" @updateIntegral="updateIntegral" @handleDetail="handleDetail" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" ref="jicTable"></jic-table>
                </div>
            </el-form>
            <el-dialog title="详情" :visible.sync="dialogVisible" width="45%" height="100%" label-width="100px" label-position="right">
                <el-form label-width="100px" label-position="left" :inline='true'>
                    <el-row>
                        <div class="table-wrap">
                            <jic-table :height="350" :operationWidth=300 :showOperation=false :tableList="details" :showUpdateIntegral=false :tableHeaderList="tableDateilList" :totalSize="totalDetailsize" :showDetailOperation=false :showEditOperation=false :showBatchDelete=false :showSelection=false :showIndex=false :showDeleteOperation=false @handleSizeChange="handleSizeDetail" @handlePageChange="handlePageDetail" ref="jicTable"></jic-table>
                        </div>
                        <div align="center">
                            <el-button type="primary" size="small" @click="dialogVisible=false">确定</el-button>
                        </div>
                    </el-row>
                </el-form>
            </el-dialog>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';

//二.数据输出区
export default {

    //===== 注册组件 =====
    components: {
        jicTable,
    },

    //===== 数据初始化区=====
    data() {
        return {

            //===== 公共数据初始化 =====
            pageIndex: 0, //当前页数：首页；
            pageSize: 10, //每页记录数：10条记录；
            totalSize: 0, //总记录数：返回数据总条数
            totalDetailsize: 0,
            dialogVisible: false,
            pageDateil: {
                pageNum: 1,
                pageSize: 10
            }, //

            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [], // 表格列表数据
            searchSize: 'mini',

            //=====表格表头数据=====
            tableHeaderList: [{
                    prop: "createTime",
                    label: "月份",
                    minWidth: 100,
                    formatter: function (row, column, sts, index) {
                        let date = new Date(sts);
                        return date.getFullYear() + "/" + (date.getMonth() + 1);
                    }
                },
                {
                    prop: "bdCode",
                    label: "部门编号",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "cutIn",
                    label: "划入金额",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "layOff",
                    label: "划出金额",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "carryOver",
                    label: "结转金额",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "number",
                    label: "错误金额",
                    minWidth: 100,
                    formatter: null
                }
            ],
            tableDateilList: [{
                    prop: "createTime",
                    label: "月份",
                    minWidth: 100,
                    formatter: function (row, column, sts, index) {
                        let date = new Date(sts);
                        return date.getFullYear() + "/" + (date.getMonth() + 1);
                    }
                },
                {
                    prop: "bdCode",
                    label: "部门Code",
                    minWidth: 100,
                    formatter: null
                },

                {
                    prop: "amount",
                    label: "金额",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "type",
                    label: "资金类型",
                    minWidth: 100,
                    formatter: function (row, column, sts, index) {
                        if (sts == 1 || sts == '1') {
                            return "流入";
                        } else if (sts == 2 || sts == '2') {
                            return "划出给供应商";
                        } else if (sts == 3 || sts == '3') {
                            return "划出给RDC";
                        }
                    }
                }
            ],
            detail: {
                bdCode: null,
                bdName: null,
                id: null,
                cutIn: null,
                layOff: null,
                carryOver: null,
                deptId: null,
                createTime: null,
                updateTime: null,
                creator: null,
                updater: null,
                deleteFlag: null,
            },
            details: [],

            //=====搜索表单对应的数据对象初始化=====
            searchFilters: {
                bdCode: null,
                bdName: null,
                id: null,
                cutIn: null,
                layOff: null,
                carryOver: null,
                deptId: null,
                createTime: null,
                updateTime: null,
                creator: null,
                updater: null,
                deleteFlag: null,
            },
            //dialogVisible: false, //// 是否显示弹窗内容;
            //editDialogVisible1: false,//// 是否可编辑弹窗内容;
            //editLoading: false,////是否显示加载时动画效果;
        }
    },

    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
        this.findPage();
    },
    watch: {
        dialogVisible(newVal, ObjVal) {
            if (newVal) {
                this.queryDetail();
            }
        }
    },

    //=====Vue.js 方法区=====
    methods: {
        updateIntegral() {

        },
        queryDetail() {
            let that = this;
            this.detail.pageNum = this.pageDateil.pageNum;
            this.detail.pageSize = this.pageDateil.pageSize;
            this.utils.request.findConfBdMoneyLogPageAll(this.detail, function (res) {
                if (res.code == "0000") {
                    that.details = res.data.list;
                    that.totalDetailsize = Number(res.data.total);
                } else {
                    that.details = [];
                }
            })
        },

        //1.查询按钮：查询列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {};
            }

            this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this.utils.request.findReconciliationPlatform(this_.searchFilters, function (res) {
                if (res.code === "0000") {
                    this_.tableList = res.data.list;
                    this_.totalSize = Number(res.data.total);
                    for (var i = 0; i < this_.tableList.length; i++) {
                        this_.tableList[i].number = this_.tableList[i].cutIn - this_.tableList[i].layOff - this_.tableList[i].carryOver;
                    }
                } else {
                    this_.tableList = [];
                    this_.totalSize = 0;
                }
            });
        },

        // 2.重置按钮：无条件查询搜索框条件
        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 3.详情按钮对应的方法
        handleDetail(params) {
            this.detail.createTime = params.row.createTime;
            this.detail.bdCode = params.row.bdCode;
            this.dialogVisible = true;

        },
        // 6.每页记录数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
        },
        // 6.每页记录数发生变化
        handleSizeDetail(params) {
            this.pageDateil.pageSize = params.size;
            this.queryDetail();
        },
        resetDetail() {
            thid.details = {};
        },

        // 7.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },
        // 7.请求页数发生变化
        handlePageDetail(params) {
            this.pageRequest.pageNum = params.number;
            this.queryDetail();
        },
        // 8.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },
    },
}
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-form-item__content {
            height: 32px;
            line-height: 32px;
            width: 150px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
